/* ========================================
   色彩系统 - 统一的颜色变量和类
   ======================================== */

:root {
  /* 主色调 */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* 中性色 */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* 状态色 */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-300: #7dd3fc;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;

  /* 优先级色彩 */
  --color-priority-p0: var(--color-error-500);
  --color-priority-p0-bg: var(--color-error-50);
  --color-priority-p0-border: var(--color-error-200);

  --color-priority-p1: var(--color-warning-600);
  --color-priority-p1-bg: var(--color-warning-50);
  --color-priority-p1-border: var(--color-warning-200);

  --color-priority-p2: var(--color-primary-500);
  --color-priority-p2-bg: var(--color-primary-50);
  --color-priority-p2-border: var(--color-primary-200);

  --color-priority-p3: var(--color-success-500);
  --color-priority-p3-bg: var(--color-success-50);
  --color-priority-p3-border: var(--color-success-200);

  /* 分类色彩 */
  --color-category-work: var(--color-primary-500);
  --color-category-work-bg: var(--color-primary-50);
  --color-category-work-border: var(--color-primary-200);

  --color-category-personal: var(--color-success-500);
  --color-category-personal-bg: var(--color-success-50);
  --color-category-personal-border: var(--color-success-200);

  --color-category-learning: #8b5cf6;
  --color-category-learning-bg: #f3f4f6;
  --color-category-learning-border: #e5e7eb;

  --color-category-health: #ec4899;
  --color-category-health-bg: #fdf2f8;
  --color-category-health-border: #fce7f3;

  --color-category-other: var(--color-gray-500);
  --color-category-other-bg: var(--color-gray-50);
  --color-category-other-border: var(--color-gray-200);
}

/* 深色模式色彩变量 */
.dark {
  /* 主色调 - 深色模式调整 */
  --color-primary-50: #1e3a8a;
  --color-primary-100: #1d4ed8;
  --color-primary-200: #2563eb;
  --color-primary-300: #3b82f6;
  --color-primary-400: #60a5fa;
  --color-primary-500: #60a5fa;
  --color-primary-600: #93c5fd;
  --color-primary-700: #bfdbfe;
  --color-primary-800: #dbeafe;
  --color-primary-900: #eff6ff;

  /* 中性色 - 深色模式 */
  --color-gray-50: #111827;
  --color-gray-100: #1f2937;
  --color-gray-200: #374151;
  --color-gray-300: #4b5563;
  --color-gray-400: #6b7280;
  --color-gray-500: #9ca3af;
  --color-gray-600: #d1d5db;
  --color-gray-700: #e5e7eb;
  --color-gray-800: #f3f4f6;
  --color-gray-900: #f9fafb;

  /* 优先级色彩 - 深色模式调整 */
  --color-priority-p0-bg: rgba(239, 68, 68, 0.1);
  --color-priority-p0-border: rgba(239, 68, 68, 0.3);

  --color-priority-p1-bg: rgba(245, 158, 11, 0.1);
  --color-priority-p1-border: rgba(245, 158, 11, 0.3);

  --color-priority-p2-bg: rgba(59, 130, 246, 0.1);
  --color-priority-p2-border: rgba(59, 130, 246, 0.3);

  --color-priority-p3-bg: rgba(34, 197, 94, 0.1);
  --color-priority-p3-border: rgba(34, 197, 94, 0.3);

  /* 分类色彩 - 深色模式调整 */
  --color-category-work-bg: rgba(59, 130, 246, 0.1);
  --color-category-work-border: rgba(59, 130, 246, 0.3);

  --color-category-personal-bg: rgba(34, 197, 94, 0.1);
  --color-category-personal-border: rgba(34, 197, 94, 0.3);

  --color-category-learning-bg: rgba(139, 92, 246, 0.1);
  --color-category-learning-border: rgba(139, 92, 246, 0.3);

  --color-category-health-bg: rgba(236, 72, 153, 0.1);
  --color-category-health-border: rgba(236, 72, 153, 0.3);

  --color-category-other-bg: rgba(107, 114, 128, 0.1);
  --color-category-other-border: rgba(107, 114, 128, 0.3);
}

/* 色彩工具类 */
.text-primary { color: var(--color-primary-500); }
.text-primary-light { color: var(--color-primary-400); }
.text-primary-dark { color: var(--color-primary-600); }

.bg-primary { background-color: var(--color-primary-500); }
.bg-primary-light { background-color: var(--color-primary-50); }
.bg-primary-dark { background-color: var(--color-primary-600); }

.border-primary { border-color: var(--color-primary-500); }
.border-primary-light { border-color: var(--color-primary-200); }

/* 状态色彩类 */
.text-success { color: var(--color-success-500); }
.bg-success { background-color: var(--color-success-500); }
.bg-success-light { background-color: var(--color-success-50); }
.border-success { border-color: var(--color-success-500); }
.border-success-light { border-color: var(--color-success-200); }

.text-warning { color: var(--color-warning-500); }
.bg-warning { background-color: var(--color-warning-500); }
.bg-warning-light { background-color: var(--color-warning-50); }
.border-warning { border-color: var(--color-warning-500); }
.border-warning-light { border-color: var(--color-warning-200); }

.text-error { color: var(--color-error-500); }
.bg-error { background-color: var(--color-error-500); }
.bg-error-light { background-color: var(--color-error-50); }
.border-error { border-color: var(--color-error-500); }
.border-error-light { border-color: var(--color-error-200); }

.text-info { color: var(--color-info-500); }
.bg-info { background-color: var(--color-info-500); }
.bg-info-light { background-color: var(--color-info-50); }
.border-info { border-color: var(--color-info-500); }
.border-info-light { border-color: var(--color-info-200); }

/* 优先级色彩类 */
.priority-p0 {
  color: var(--color-priority-p0);
  background-color: var(--color-priority-p0-bg);
  border-color: var(--color-priority-p0-border);
}

.priority-p1 {
  color: var(--color-priority-p1);
  background-color: var(--color-priority-p1-bg);
  border-color: var(--color-priority-p1-border);
}

.priority-p2 {
  color: var(--color-priority-p2);
  background-color: var(--color-priority-p2-bg);
  border-color: var(--color-priority-p2-border);
}

.priority-p3 {
  color: var(--color-priority-p3);
  background-color: var(--color-priority-p3-bg);
  border-color: var(--color-priority-p3-border);
}

/* 分类色彩类 */
.category-work {
  color: var(--color-category-work);
  background-color: var(--color-category-work-bg);
  border-color: var(--color-category-work-border);
}

.category-personal {
  color: var(--color-category-personal);
  background-color: var(--color-category-personal-bg);
  border-color: var(--color-category-personal-border);
}

.category-learning {
  color: var(--color-category-learning);
  background-color: var(--color-category-learning-bg);
  border-color: var(--color-category-learning-border);
}

.category-health {
  color: var(--color-category-health);
  background-color: var(--color-category-health-bg);
  border-color: var(--color-category-health-border);
}

.category-other {
  color: var(--color-category-other);
  background-color: var(--color-category-other-bg);
  border-color: var(--color-category-other-border);
}

/* 渐变色彩 */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
}

.gradient-success {
  background: linear-gradient(135deg, var(--color-success-500), var(--color-success-600));
}

.gradient-warning {
  background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600));
}

.gradient-error {
  background: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
}

/* 阴影色彩 */
.shadow-primary {
  box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.15);
}

.shadow-success {
  box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.15);
}

.shadow-warning {
  box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
}

.shadow-error {
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.15);
}

/* 悬停状态 */
.hover-primary:hover {
  background-color: var(--color-primary-600);
}

.hover-success:hover {
  background-color: var(--color-success-600);
}

.hover-warning:hover {
  background-color: var(--color-warning-600);
}

.hover-error:hover {
  background-color: var(--color-error-600);
}

/* 焦点状态 */
.focus-primary:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.focus-success:focus {
  outline: 2px solid var(--color-success-500);
  outline-offset: 2px;
}

.focus-warning:focus {
  outline: 2px solid var(--color-warning-500);
  outline-offset: 2px;
}

.focus-error:focus {
  outline: 2px solid var(--color-error-500);
  outline-offset: 2px;
}
